<template>
  <view class="my-home">
    <!-- 顶部背景装饰 -->
    <view class="home-header-bg"></view>
    <view class="user-card">
      <!-- 头像区域 -->
      <view class="avatar-container">
        <view class="avatar-wrapper">
          <image 
            v-if="avatarUrl" 
            :src="avatarUrl" 
            mode="widthFix" 
            class="avatar-img"
          ></image>
          <view class="avatar-edit-mask"></view>
          <button 
            open-type="chooseAvatar" 
            @chooseavatar="onChooseAvatar"
            class="avatar-choose-btn"
          ></button>
        </view>
      </view>
      
      <view class="nickname-container">
        <text class="nickname-label">我的昵称</text>
        <u-input 
          type="nickname" 
          placeholder="请输入你的昵称"
          v-model="nickName"
          @blur="onInputNickName"
          @clear="clearNickname"
          :clearable="tempNickName"
          class="wechat-input"
        ></u-input>
      </view>
    </view>
    
    <view class="function-modules">
      <navigator 
        v-for="(item, index) in functionList"
        :key="index"
        :url="item.url"
        class="module-card"
      >
        <view @click="goto(index)" class="module-bg" :style="{ backgroundImage: `url(${item.icon})`} "></view>
        <view class="module-content">
          <image :src="item.icon" class="module-icon"></image>
          <text class="module-title">{{ item.title }}</text>
        </view>
      </navigator>
    </view>
    
    <!-- 底部版权信息 -->
    <view class="copyright">
      <text>「声绪」- 用声音治愈每一种情绪 © 2025</text>
    </view>
  </view>
</template>

<script>
import { getUserInfo } from '../../api/User';
export default {
  data() {
    return {
      nickName: '',
      avatarUrl: '',
      tempNickName: '',
      // 功能列表数据（保持原数据不变）
      functionList: [
        {
          title: '我的收藏',
          url: '/pages/myHome/myCollection/myCollection',
          icon: 'https://hjyqyh.oss-cn-beijing.aliyuncs.com/whitenoise/myHome/love.png' // 可替换为模块背景图路径
        },
        {
          title: '聆听历史',
          url: '/pages/myHome/listeningHistory/listeningHistory',
          icon: 'https://hjyqyh.oss-cn-beijing.aliyuncs.com/whitenoise/myHome/history.png'
        },
        {
          title: '情绪记录',
          url: '/pages/myHome/emotionRecord/emotionRecord',
          icon: 'https://hjyqyh.oss-cn-beijing.aliyuncs.com/whitenoise/myHome/mood.png'
        },
        {
          title: '情绪周报',
          url: '/pages/myHome/emotionWeekly/emotionWeekly',
          icon: 'https://hjyqyh.oss-cn-beijing.aliyuncs.com/whitenoise/myHome/moodReport.png'
        },
      ]
    };
  },
  watch: {
    // 监听昵称变化，控制清除按钮显示
    nickName(val) {
      this.tempNickName = val.trim() !== '';
    }
  },
  onShow() {
    // 从本地存储获取用户信息
    const userInfo = uni.getStorageSync('userInfo') || {};
    this.nickName = userInfo.nickName || '';
    this.avatarUrl = userInfo.avatarUrl;
    const token = uni.getStorageSync("token")
    // if(token === ''){
    //   uni.navigateTo({
    //     url:"/pages/login/login"
    //   })
    // }
  },
  methods: {
	goto(index){
		if(index==0){
			uni.navigateTo({
				url:"/pages/myHome/MyCollection/MyCollection"
			})
		}
		if(index==1){
			uni.navigateTo({
				url:"/pages/myHome/MyCollection/MyCollection"
			})
		}
		if(index==2){
			uni.navigateTo({
				url:"/pages/myHome/listeningHistory/listeningHistory"
			})
		}
		if(index==3){
			uni.navigateTo({
				url:"/pages/myHome/emotionWeekly/emotionWeekly"
			})
		}
	},
    onChooseAvatar(e) {
      const tempAvatarUrl = e.detail.avatarUrl; 
      console.log(tempAvatarUrl)
      uni.getImageInfo({
        src: tempAvatarUrl,
        success: (imgInfo) => {
          const dir = 'userImg'
          const fs = uni.getFileSystemManager();
          const imgData = fs.readFileSync(imgInfo.path); 
          uni.uploadFile({
            url: `http://localhost:8790/data-mood-api/common/upload?dir=${dir}`,
            filePath: imgInfo.path,
            name: 'file', 
            success: (uploadRes) => {
              const res = JSON.parse(uploadRes.data);
              if (res.code === 0) {
                this.avatarUrl = res.data.url; 
                this.saveUserInfo(); 
                getUserInfo(this.avatarUrl,this.nickName).then(res=>{
                  console.log(res)
                })
              }
            }
          });
        }
      });
    },
    // 昵称输入完成
    onInputNickName() {
      this.saveUserInfo();
      if(this.nickName !== ''){
        getUserInfo(this.avatarUrl,this.nickName).then(res=>{
          console.log(res)
        })
      }
    },
    // 清空昵称
    clearNickname() {
      this.nickName = '';
      this.saveUserInfo();
    },
    // 保存用户信息到本地
    saveUserInfo() {
      uni.setStorageSync('userInfo', {
        avatarUrl: this.avatarUrl,
        nickName: this.nickName
      });
    }
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.my-home {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 60rpx;
  box-sizing: border-box;
}

/* 顶部背景 */
.home-header-bg {
  width: 100%;
  height: 200rpx;
  background: linear-gradient(135deg, #e8f3ff, #d1e7fe);
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 用户卡片 */
.user-card {
  width: 92%;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
  margin: 150rpx auto 30rpx;
  padding: 35rpx 25rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* 头像区域 */
.avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}
.avatar-wrapper {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid #e8f3ff;
  position: relative;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-edit-mask {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: #07c160;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-choose-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

/* 昵称区域 */
.nickname-container {
  width: 100%;
}
.nickname-label {
  display: block;
  font-size: 22rpx;
  color: #666666;
  margin-bottom: 10rpx;
  padding-left: 5rpx;
}
.wechat-input {
  --u-input-bg-color: #f7f7f7;
  --u-input-border-radius: 12rpx;
  --u-input-font-size: 24rpx;
  --u-input-height: 64rpx;
}

.function-modules {
  width: 92%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr ;
  gap: 20rpx;
}

.module-card {
  height: 200rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}
.module-card:active {
  transform: scale(0.98);
  box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.04);
}
.module-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.3; 
  z-index: 1;
}

.module-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 25rpx;
  box-sizing: border-box;
}

.module-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
}

.module-title {
  font-size: 26rpx;
  color: #333333;
  flex: 1;
}

.copyright {
  width: 100%;
  margin-top: 50rpx;
  text-align: center;
  font-size: 18rpx;
  color: #999999;
}
</style>